<template>
	<view class="d-flex flex-column" style="height: 100%;">
		<!-- 选项卡 -->
		<view class="d-flex a-center font-md text-muted border-top border-bottom border-light-secondary bg-white mt-0">
			<view class="flex-1 d-flex a-center j-center py-2" :class="index === tabIndex ? 'tab-active' : ''"
				v-for="(item,index) in tabBars" :key="index" @tap="changeTab(index)">{{item.name}}</view>
		</view>
		<scroll-view scroll-y="true" class="flex-1" style="background: #F5F5F5;">
			<block v-for="(tab,tabI) in tabBars" :key="tabI">
				<view class="position-relative" v-show="tabI === tabIndex" style="min-height: 440rpx;">
					<template v-if="tab.list.length > 0">
						<view class="p-3">
							<coupon v-for="(item,index) in tab.list" :key="index" :item="item" :index="index"></coupon>
						</view>
					</template>
					<!-- 默认无 -->
					<template v-else>
						<no-thing :icon="tab.no_thing" :msg="tab.msg"></no-thing>
					</template>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	import coupon from "../../components/order-coupon/coupon.vue"
	import noThing from "@/components/common/no-thing.vue"
	export default {
		components: {
			noThing,coupon
		},
		data() {
			return {
				tabIndex: 0,
				tabBars: [{
					id: "",
					name: "可用",
					key:"valid",
					no_thing: "no_pay",
					msg: "你还没有可用的优惠券",
					page:1,
					list: [{
						title:"手机立减1000元",
						start_time:"2024-03-28",
						end_time:"2024-04-27",
						price:"100",
						desc:"满3000元可用",
						status:true,
						disabled:false
					}]
				}, {
					id: "",
					name: "已失效",
					key:"invalid",
					no_thing: "no_pay",
					msg: "你还没有优惠券",
					list: [
						{
							title:"手机立减1000元",
							start_time:"2024-03-28",
							end_time:"2024-04-27",
							price:"100",
							desc:"满3000元可用",
							status:false,
							disabled:false
						}
					]
				}],
			}
		},
		onLoad() {
			this.getData()
		},
		computed:{
			// 是否失效
			isvalid(){
				return this.tabBars[this.tabIndex].key
			},
			page(){
				return this.tabBars[this.tabIndex].page
			}
		},
		methods: {
			getData(){
				this.$H.get('/usercoupon/'+this.page+'/'+this.isvalid,{},{
					token:true
				}).then(res=>{
					console.log(res);
				})
			},
			changeTab(index) {
				this.tabIndex = index
			}
		}
	}
</script>

<style>
	.tab-active {
		border-bottom: solid 5rpx #FD6801;
		color: #FD6801;
		margin-bottom: -5rpx;
	}
</style>